<template>
  <a-layout class="app-layout">
    <a-layout-sider class="app-layout-sider" v-model:collapsed="collapsed" :trigger="null" collapsible
      :style="{ overflow: 'auto', height: '100vh', position: 'fixed', left: 0 }" theme="light">
      <div class="logo">
        <a-avatar :src="navLogo" :size="30"></a-avatar>
        <span class="text" v-show="!collapsed">后台管理</span>
      </div>

      <NavMenu :datas="navMenu" @on-select="onNavMenuSelect" v-if="navMenu.length" ref="navMenuRef" />
    </a-layout-sider>
    <a-layout :style="{ marginLeft: collapsed ? '80px' : '200px' }">
      <a-layout-header class="app-layout-header">
        <div>
          <a-row type="flex" class="app-layout-hh">
            <a-col flex="160px">
              <div style="height: 50px;">
                <menu-unfold-outlined v-if="collapsed" class="trigger" @click="collapsedNavMenu(false)" />
                <menu-fold-outlined v-else class="trigger" @click="collapsedNavMenu(true)" />
              </div>
            </a-col>
            <a-col flex="auto">
              <div class="app-hh-btns">
                <div class="app-hh-btn" @click="onQuickOpenPage(20)">
                  <BellOutlined />
                  <span class="text">通知</span>
                </div>
                <div class="app-hh-btn" @click="onQuickOpenPage(21)">
                  <SearchOutlined /> <span class="text">教程</span>
                </div>
                <div class="app-hh-btn" @click="onQuickOpenPage(22)">
                  <FireOutlined />
                  <span class="text">更新</span>
                </div>
                <div class="app-hh-btn" @click="onQuickOpenPage(23)">
                  <DownloadOutlined />
                  <span class="text">下载</span>
                </div>
                <!-- <div class="app-hh-btn" data-disabled>
                  <FieldNumberOutlined />
                  <span class="text">版本 3.6.8.9</span>
                </div>-->
                <div class="app-page-logo">
                  <a-dropdown class="user-logo-wap" :trigger="['click']">
                    <a class="ant-dropdown-link" @click.prevent>
                      <a-avatar class="user-logo" :src="navLogo"></a-avatar>
                      <span class="user-name">
                        {{ useInfo.Name }}
                        <span style="padding-left: 3px;font-size:12px">
                          <DownOutlined />
                        </span>
                      </span>
                    </a>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="1" @click="onQuickOpenPage(26)">
                          <UsergroupAddOutlined /> 我的推广
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item key="3" @click="onQuickOpenPage(25)">
                          <SafetyCertificateOutlined /> 账号安全
                        </a-menu-item>
                        <a-menu-divider />
                        <a-menu-item key="5" @click="onLoginOut">
                          <LoginOutlined /> 退出登录
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </div>
              </div>
            </a-col>
          </a-row>
        </div>

        <div class="app-layout-header-tabsbar">
          <div class="app-layout-header-tabs">
            <a-tabs v-model:activeKey="layoutTabsActiveKey" hide-add type="editable-card" @change="tabsChange"
              @edit="onCloseTabs">
              <a-tab-pane v-for="item in layoutTabs" :key="item.id">
                <template #tab>
                  <a-dropdown :trigger="['contextmenu']">
                    <span>{{ item.title }}</span>
                    <template #overlay>
                      <a-menu>
                        <a-menu-item key="1" @click="onCloseTabs(item.id)">
                          <CloseOutlined />关闭页面
                        </a-menu-item>
                        <a-menu-item key="2" @click="onCloseLeftTabs(item.id)">
                          <VerticalRightOutlined />关闭左边页面
                        </a-menu-item>
                        <a-menu-item key="3" @click="onCloseRightTabs(item.id)">
                          <VerticalLeftOutlined />关闭右边页面
                        </a-menu-item>
                      </a-menu>
                    </template>
                  </a-dropdown>
                </template>
              </a-tab-pane>
              <!-- <template #tabBarExtraContent>
                <div class="app-layout-tabsbar-btns">
                  <a-tooltip placement="leftBottom">
                    <template #title>刷新页面</template>
                    <div class="app-layout-tbtn">
                      <SyncOutlined />
                    </div>
                  </a-tooltip>
                </div>
              </template>-->
            </a-tabs>
          </div>
        </div>
      </a-layout-header>

      <a-layout-content class="app-layout-page">
        <router-view />
      </a-layout-content>
    </a-layout>
  </a-layout>
</template>
<script lang="ts" setup>
import { ref, onMounted, nextTick } from "vue";
import NavMenu from "@/components/NavMenu/NavMenu.vue";

import { UserContext } from "@/utils/UserContext";
import { SysMenuService } from "@/services/System/SysMenuService";
import { SysMenuDto } from "@/models/System/SysMenuDto";
import { useRouter, useRoute } from 'vue-router'

import navLogo from '@/assets/logo.svg';
import { UserCenterService } from "@/services/User/UserCenterService";
import { UserDto } from "@/models/User/UserDto";

/**快捷按钮数据 */
class LayoutTabs {
  /**唯一值 */
  id: number = 0;
  /**标题 */
  title: string = "";

  /**图标 */
  icon: string = "";

  /**跳转地址 */
  url: string = "";

  /**是否显示关闭按钮 */
  showClosebutton: boolean = true;
}

const $router = useRouter();
const route = useRoute()
const collapsed = ref(false);
const navMenu = ref<SysMenuDto.Base[]>([]);
const layoutTabsActiveKey = ref<number>(0);
const layoutTabs = ref<LayoutTabs[]>([]);
const navMenuRef = ref<any>();

const useInfo = ref<UserDto.BaseResult>(new UserDto.BaseResult());

const collapsedNavMenu = (col: any) => {
  collapsed.value = col;
}

const onLoginOut = () => {
  UserContext.remove();
  setTimeout(function () {
    location.href = "/user/login";
  }, 500)
}

// 添加快捷菜单数据
const addLayoutTabs = (data: SysMenuDto.Base) => {
  if (layoutTabs.value.findIndex(f => f.id == data.id) < 0) {
    layoutTabs.value.push({
      id: data.id,
      icon: data.icon,
      title: data.name,
      showClosebutton: true,
      url: data.url
    });
  }
  layoutTabsActiveKey.value = data.id;
  navMenuRef.value.selected(data.id);
  $router.push(data.url);
};

/**页面加载 */
const onPageLoad = async () => {
  onMounted(async () => {
    // if (!UserContext.isExist()) {
    //   let redirectUrl = "/user/login";
    //   location.href = redirectUrl;
    // }
    useInfo.value = UserCenterService.userInfoAsync();
    let sysMenuDatas = SysMenuService.getListAsync();
    navMenu.value = sysMenuDatas;
    let data = sysMenuDatas.find(f => f.url == route.path) ?? new SysMenuDto.Base();
    if (data.id <= 0) {
      return;
    }
    nextTick(() => {
      addLayoutTabs(data);
    })
  })
}

/**菜单点击 */
const onNavMenuSelect = (data: SysMenuDto.Base) => {
  addLayoutTabs(data);
}

//顶部快捷按钮点击
const onQuickOpenPage = (akey: number) => {
  let data = navMenu.value.find(f => f.id == akey) ?? new SysMenuDto.Base();
  addLayoutTabs(data);
}

/**快捷菜单按钮被点击 */
const tabsChange = (akey: number) => {
  navMenuRef.value.selected(akey)
  let laytbas = layoutTabs.value.find(f => f.id == akey) ?? new LayoutTabs();
  $router.push(laytbas.url);
}

//打开页面
const openPage = (id: number) => {
  let laytbas = navMenu.value.find(f => f.id == id) ?? new LayoutTabs();
  navMenuRef.value.selected(id);
  layoutTabsActiveKey.value = id;
  $router.push(laytbas.url);
}

/**关闭tabs */
const onCloseTabs = (id: number) => {

  let index = layoutTabs.value.findIndex(f => f.id == id);
  let changeIndex = 0;
  //如果当前是最后一个则打开上一个页面
  let lastIndex = layoutTabs.value.length - 1;
  if (lastIndex == index) {
    changeIndex = index - 1;
  } else {
    changeIndex = index + 1;
  }
  if (changeIndex <= 0) {
    changeIndex = 0;
  }

  //获取当前索引的数据
  let tabsData = layoutTabs.value[changeIndex];
  openPage(tabsData.id);
  //移除tabs数据
  layoutTabs.value.splice(index, 1)
}

//关闭左边
const onCloseLeftTabs = (id: number) => {
  let index = layoutTabs.value.findIndex(f => f.id == id);
  if (index > 0) {
    layoutTabs.value.splice(0, index)
  }
}

//关闭右边
const onCloseRightTabs = (id: number) => {
  let index = layoutTabs.value.findIndex(f => f.id == id);
  let leng = layoutTabs.value.length;


  if (leng > index) {
    let s = index + 1;
    let count = leng - s;
    if (count > 0) {
      layoutTabs.value.splice(s, count);
    }
  }

}


onPageLoad();



</script>

<style scoped>
.app-layout {
  height: 100%;
  background-color: #f7f8fa;
}

.app-layout-sider {
  box-shadow: rgb(29 35 41 / 5%) 2px 0px 8px 0px;
  z-index: 2;
  background: #001529;
}

.trigger {
  font-size: 18px;
  line-height: 50px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

.trigger:hover {
  color: #1890ff;
}

.logo {
  height: 50px;
  color: #409eff;
  font-size: 16px;
  font-weight: 700;
  text-align: center;
  line-height: 50px;
}

.logo text {
  padding-left: 6px;
  color: #fff;
  display: inline-block;
}

.site-layout-background {
  background: #fff;
}

.app-layout-header {
  height: 95px;
  background-color: #fff;
  padding: 0;
}

.app-hh-btns {
  display: flex;
  justify-content: flex-end;
  height: 50px;
  align-items: center;
}

.app-hh-btn {
  margin-left: 6px;
  padding: 0 10px 0 10px;
  height: 50px;
  line-height: 50px;
  text-overflow: ellipsis;
  overflow: hidden;
}

.app-hh-btn>span.text {
  padding-left: 3px;
}

.app-hh-btn:hover {
  background-color: #e5e5e5;
  cursor: pointer;
}

.app-hh-btn[data-disabled]:hover {
  background-color: transparent !important;
  cursor: default;
}

.app-layout-header-tabsbar {
  height: 44px;
  box-shadow: 0 1px 4px #00152914;
  position: relative;
  padding: 0px 16px 0px 16px;
}

.app-layout-tabsbar-btns {
  display: flex;
  line-height: 34px;
  width: 600px;
}

.app-layout-tbtn {
  display: inline-block;
  width: 46px;
  border-top-right-radius: 6px;
  border-top-left-radius: 6px;
  text-align: center;
  cursor: pointer;
  font-size: 14px;
}

.app-layout-tbtn:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.app-layout-hh {
  /* display: flex;
  align-items: center; */
  height: 50px;
  align-items: center;
  flex-flow: initial !important;
}

.app-page-logo {
  /* display: flex;
  position: fixed;
  right: 0;
  padding-right: 3px;*/
  height: 50px;
}

.app-page-logo>a {
  padding: 0px 10px 0 10px;
  display: flex;
  align-items: center;
  color: #333;
  height: 100%;
}

.app-page-logo .user-logo-wap {
  min-width: 160px;
}

.app-page-logo .user-logo {
  margin-right: 10px;
}

.app-page-logo>a:hover {
  background-color: rgba(0, 0, 0, 0.1);
}

.app-layout-page {
  overflow: auto;
  height: 100vh;
  padding-bottom: 100px;
}

.app-layout-page::-webkit-scrollbar-thumb:hover {
  background: #1890ff;
}

.app-tabsbar .ant-tabs-tab {
  padding: 0;
}
</style>
